<template>
  <div>
    <el-card>
      <div slot="header">
        <span>历史龙舟赛事时间地图</span>
      </div>
      <div>
        
        
        <!-- 时间线展示 -->
        <el-timeline>
          <el-timeline-item 
            v-for="(event, index) in sortedEvents" 
            :key="index" 
            :timestamp="event.date" 
            placement="top">
            <el-card shadow="hover">
              <h4>{{ event.event }}</h4>
              <p>地点：{{ event.location }}</p>
              <p>冠军：{{ event.champion }}</p>
              <div style="margin-top: 10px;">
                <el-button 
                  @click="watchVideo(event.video)" 
                  type="primary" 
                  size="small">
                  观看比赛视频
                </el-button>
                <el-popover placement="right" trigger="hover" style="margin-left: 10px;">
                  <el-image 
                    :src="event.mapImage" 
                    style="max-width: 400px; max-height: 300px;"
                    :preview-src-list="[event.mapImage]">
                  </el-image>
                  <el-button 
                    slot="reference" 
                    type="success" 
                    size="small">
                    查看地图
                  </el-button>
                </el-popover>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
        
        
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      historyData: [
        { 
          year: '2024', 
          event: '粤港澳大湾区（东莞）龙舟邀请赛', 
          date: '2024年6月22日',
          location: '华阳湖国家湿地公园',
          champion: '佛山市九江双蒸龙舟队（200米/500米混合组直道赛双冠）', 
          video: 'https://nflive.southcn.com/index?id=3405',
          mapImage: 'https://q5.itc.cn/q_70/images03/20240618/9ef6ec5a61ee49f4ad73b547877a5286.png'
        },
        { 
          year: '2024', 
          event: '珠海斗门龙舟邀请赛', 
          date: '2024年5月25日',
          location: '珠海市斗门区黄杨河',
          champion: '中山同德礼联龙舟队（公开组）', 
          video: 'https://gdylive.hizh.cn/live/138731?uin=2756',
          mapImage: require('@/assets/斗门.png') 
        },
        { 
          year: '2024', 
          event: '广州国际龙舟邀请赛', 
          date: '2024年6月16日',
          location: '中大北门广场至广州大桥之间的珠江河段',
          champion: '华南师范大学龙舟队（大学生组）', 
          video: 'https://www.bilibili.com/video/BV1y4421S7pj/?spm_id_from=333.337.search-card.all.click&vd_source=5004de5347504dc2a29615ab2830cbe9',
          mapImage: require('@/assets/广州.png')
        },
        { 
          year: '2023', 
          event: '佛山叠滘龙船漂移大赛（东胜杯）', 
          date: '2023年6月22日',
          location: '南海区叠滘东胜村',
          champion: '庆云龙船队（S弯赛道）',
          video: 'https://www.bilibili.com/video/BV1Mg4y1N78o/?vd_source=5004de5347504dc2a29615ab2830cbe9',
          mapImage: require('@/assets/东胜.png')
        },
        { 
          year: '2023', 
          event: '粤港澳大湾区五人龙舟公开赛', 
          date: '2023年10月1日',
          location: '佛山市三水区白坭镇',
          champion: '广东粤构一队（公开组）', 
          video: 'https://www.bilibili.com/video/BV1q8411C74f/?vd_source=5004de5347504dc2a29615ab2830cbe9',
          mapImage: 'https://inews.gtimg.com/om_bt/OMkcUZRdov44D5HpRIDMpv59hFCqe5QFw65nCHGpva-xwAA/641'
        }
      ]
    }
  },
  computed: {
    sortedEvents() {
      return [...this.historyData].sort((a, b) => {
        return new Date(b.date.replace('年', '/').replace('月', '/').replace('日', '')) - 
               new Date(a.date.replace('年', '/').replace('月', '/').replace('日', ''));
      });
    }
  },
  methods: {
    watchVideo(url) {
      window.open(url, '_blank');
    }
  }
}
</script>

<style>
/* 添加图片悬停效果 */
.el-image:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

/* 时间线样式调整 */
.el-timeline {
  margin-top: 20px;
}
.el-timeline-item__timestamp {
  color: #666;
  font-size: 14px;
}
</style>